<template>
  <div class="search">
    <Card>
      <div class="card-text">
        <div class="title">会员卡页面文本</div>
        <div v-if="cardText">
          <div style="width: 500px;" v-html="cardText.content"></div>
        </div>
        <Button @click="editPerm(cardText,'card');" type="primary">编辑</Button>
      </div>
    </Card>
    <Card>
      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table">
        <!-- 页面展示 -->
        <template slot-scope="{ row }" slot="ownerCardno">
          <span class="yemian" v-html="row.description"
            style="overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; ">
          </span>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total
          show-elevator show-sizer></Page>
      </Row>
    </Card>
    <!-- 修改模态框 -->
    <Modal v-model="descFlag" :title="descTitle" width="1000">
      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
        <FormItem v-if="type==='vip'" label="等级名称" prop="name">
          <Input v-model="form.name" style="width: 200px" />
        </FormItem>
        <FormItem v-if="type==='vip'" label="会员金额" prop="money">
          <Input-number :max="1000000" :min="1" v-model="form.money" style="width: 200px"></Input-number>
        </FormItem>
        <FormItem v-if="type==='vip'" label="充值折扣" prop="rebate" style="width: 200px">
          <Input-number :max="10" :min="0.1" v-model="form.rechargeRule" style="width: 100%"></Input-number>
        </FormItem>
        <FormItem v-if="type==='vip'" label="文本" prop="description">
          <editor openXss v-model="form.description"></editor>
        </FormItem>
        <FormItem v-if="type==='card'" label="文本" prop="content">
          <editor openXss v-model="form.content"></editor>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="descFlag = false">取消</Button>
        <Button type="primary" @click="handleSubmitModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import * as API_Member from "@/api/member.js";
  import * as API_Pages from "@/api/pages.js";
  import * as RegExp from "@/libs/RegExp.js";
  import editor from "@/views/my-components/lili/editor"

  export default {
    name: "member",
    components: {
      editor
    },
    data() {
      return {
        type: 'vip',
        descTitle: "", // modal标题
        descFlag: false, //编辑查看框
        loading: true, // 表单加载状态
        cardText: '',
        searchForm: {
          // 请求参数
          pageNumber: 1,
          pageSize: 10,
          order: "desc",
          disabled: "OPEN",
        },
        // 修改对象
        form: {
          level: null,
          name: '',
          rebate: '',
          money: null,
          description: '',
          content: ''
        }, // 表单数据
        ruleValidate: {
          name: [{
            required: true,
            message: "请输入等级名称"
          }],
          level: [{
            required: true,
            message: "请输入会员等级"
          }],
          money: [{
            required: true,
            message: "请输入会员金额"
          }],
          rechargeRule: [{
            required: true,
            message: "请输入充值折扣"
          }],
        }, //修改验证
        columns: [{
            title: "等级名称",
            key: "name",
            tooltip: true,
          },
          {
            title: "会员等级",
            key: "level",
            tooltip: true,
          },
          {
            title: "会员金额",
            key: "money",
            tooltip: true,
          },
          {
            title: "充值折扣",
            key: "rechargeRule",
            tooltip: true,
          },
          {
            title: "文本",
            key: "description",
            tooltip: true,
            slot: "ownerCardno",
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            width: 200,
            fixed: "right",
            render: (h, params) => {
              return h(
                "div", {
                  style: {
                    display: "flex",
                    justifyContent: "center",
                  },
                },
                [
                  h(
                    "Button", {
                      props: {
                        size: "small",
                        type: params.row.___selected ? "primary" : "default",
                      },
                      style: {
                        marginRight: "5px",
                        display: this.selectedMember ? "block" : "none",
                      },
                      on: {
                        click: () => {
                          this.callback(params.row, params.index);
                        },
                      },
                    },
                    params.row.___selected ? "已选择" : "选择"
                  ),
                  h(
                    "Button", {
                      props: {
                        type: "info",
                        size: "small",
                        ghost: true,
                      },
                      style: {
                        marginRight: "5px",
                        display: this.selectedMember ? "none" : "block",
                      },
                      on: {
                        click: () => {
                          this.editPerm(params.row, 'vip');
                        },
                      },
                    },
                    "编辑"
                  ),
                ]
              );
            },
          },
        ],
        data: [], // 表单数据
        total: 0, // 表单数据总数
        selectMember: [], //保存选中的用户
      };
    },
    props: {
      // 是否为选中模式
      selectedMember: {
        type: Boolean,
        default: false,
      },
      // 已选择用户数据
      selectedList: {
        type: null,
        default: () => {
          return [];
        },
      },
    },
    watch: {
      selectedList: {
        handler(val) {
          this.$set(this, "selectMember", JSON.parse(JSON.stringify(val)));
          this.init(this.data);
          // 将父级数据与当前组件数据进行匹配
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      //查询会员等级列表
      getData() {
        API_Member.getMembergrade(this.searchForm).then((res) => {
          if (res.result.records) {
            this.loading = false;
            this.init(res.result.records);
            this.total = res.result.total;
          }
        });
        API_Pages.searchArticle('CARD_DESCRIPTION').then((res) => {
          if (res.result) {
            this.cardText = res.result[0]
          }
        });
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getData();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.searchForm.pageNumber = 1;
        this.getData();
      },
      // 初始化信息
      init(data) {
        data.forEach((item) => {
          if (this.selectMember.length != 0) {
            this.selectMember.forEach((member) => {
              if (member.id == item.id) {
                this.$set(item, "___selected", true);
              }
            });
          } else {
            this.$set(item, "___selected", false);
          }
        });
        this.data = data;
      },
      //查看详情修改
      editPerm(val, type) {
        this.type = type
        if (type == 'vip') {
          this.descTitle = `编辑等级 ${val.name}`;
          this.getMemberInfo(val.id);
        }
        if (type == 'card') {
          this.$set(this, "form", val);
          this.descTitle = `编辑会员卡文本`;
        }
        this.descFlag = true;
        this.form.id = val.id
      },
      // 查询查看等级详情
      getMemberInfo(id) {
        API_Member.getdetMembergrade(id).then((res) => {
          if (res.result) {
            this.$set(this, "form", res.result);
          }
        });
      },
      // 提交修改数据
      handleSubmitModal() {
        if (this.type === 'vip') {
          this.$refs.form.validate((valid) => {
            if (valid) {
              API_Member.getaddMembergrade(this.form).then((res) => {
                if (res.code == 200) {
                  this.descFlag = false;
                  this.$Message.success("修改成功！");
                  this.getData();
                }
              });
            } else {
              this.$Message.error('必填项不能为空!');
              return false
            }
          });
        } else {
          API_Pages.updateArticle(this.form).then((res) => {
            if (res.code == 200) {
              this.descFlag = false;
              this.$Message.success("修改成功！");
              this.getData();
            }
          });
        }
      },
    },
    mounted() {
      this.getData();
    },
  };
</script>
<style lang="scss" scoped>
  /deep/ .ivu-table-wrapper {
    width: 100%;
  }

  /deep/ .ivu-card {
    width: 100%;
  }

  .card-text {
    margin-bottom: 24px;

    .title {
      font-size: 16px;
    }
  }

  .face {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
</style>
